//渲染学生页面
function render() {
    axios.get('/student/list').then(res => {
        // console.log(res)
        const { code, data, message } = res.data
        const newArr = data.map(item => {
            return `<tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province}${item.city}${item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id=${item.id}>修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id=${item.id}>删除</button>
        </td>
      </tr> `
        })
        document.querySelector('tbody').innerHTML = newArr.join('')
    })
}
render()
//删除操作
document.querySelector('tbody').addEventListener('click', function (e) {
    //  console.log(123)
    if (e.target.tagName === 'BUTTON' && e.target.textContent === '删除') {
        if (!confirm('确定删除该学员吗')) return
        const id = e.target.dataset.id
        // console.log(id)
        axios.delete('/student/delete', { params: { id } }).then(res => {
            // console.log(res)
            const { code, message } = res.data
            if (code === 0) {
                render()
            }
        })
    }
})

let id = ''
//修改操作
document.querySelector('tbody').addEventListener('click', function (e) {
    //  console.log(123)

    const { tagName, textContent } = e.target
    if (tagName === 'BUTTON' && textContent === '修改') {
         id = e.target.dataset.id
        // console.log(id)
        axios.get('/student/one', { params: { id } }).then(res => {
            // console.log(res)
            const { code, message, data } = res.data
            // 数据回填
            document.querySelector('#updateModal [name=age]').value = data.age
            document.querySelector('#updateModal [name=name]').value = data.name
            document.querySelector('#updateModal [name=salary]').value = data.salary
            document.querySelector('#updateModal [name=truesalary]').value = data.truesalary
            document.querySelector('#updateModal [name=phone]').value = data.phone
            document.querySelector('#updateModal [name=group]').value = data.group


            const rds = document.querySelectorAll('#updateModal [name=sex]')
            for (let i = 0; i < rds.length; i++) {
                if (rds[i].value === data.sex) {
                    rds[i].checked = true
                }
            }
            document.querySelector('#updateModal [name=province]').value = data.province
            document.querySelector('#updateModal [name=city]').innerHTML = `<option value="${data.city}">${data.city}</option>`
            document.querySelector('#updateModal [name=county]').innerHTML = `<option value="${data.county}">${data.county}</option>`
            //让模态框显示)
            $('#updateModal').modal('show')
        })
    }
})
//省市县三级联动
axios.get('/geo/province').then(res => {
    // console.log(res)
    let opts = '<option value="">--省--</option>'
    res.data.forEach(item => {
        // console.log(item)
        opts += `<option value="${item}">${item}</option>`
    })
    document.querySelector("#addModal [name=province]").innerHTML = opts
    document.querySelector("#updateModal [name=province]").innerHTML = opts

})
//change事件
document.querySelector("#addModal [name=province]").addEventListener('change', function () {
    const pname = this.value
    if (pname === '') return
    axios.get('/geo/city', { params: { pname } }).then(res => {
        let opts = '<option value="">--市--</option>'
        res.data.forEach(item => {
            opts += `<option value="${item}">${item}</option>`
        })
        document.querySelector("#addModal [name=city]").innerHTML = opts
    })
})
//数据回填
document.querySelector("#updateModal [name=province]").addEventListener('change', function () {
    const pname = this.value
    if (pname === '') return
    axios.get('/geo/city', { params: { pname } }).then(res => {
        let opts = '<option value="">--市--</option>'
        res.data.forEach(item => {
            opts += `<option value="${item}">${item}</option>`
        })
        document.querySelector("#updateModal [name=city]").innerHTML = opts
    })
})




//获取县的数据,通过change事件
document.querySelector("#addModal [name=city]").addEventListener('change', function () {
    const pname = document.querySelector("#addModal [name=province]").value
    const cname = this.value
    if (pname === '' || cname === '') return
    axios.get('/geo/county', { params: { pname, cname } }).then(res => {
        // console.log(res)
        let opts = '<option value="">--县--</option>'
        res.data.forEach(item => {
            opts += `<option value="${item}">${item}</option>`
        })
        document.querySelector("#addModal [name=county]").innerHTML = opts
    })
})
//数据回填
document.querySelector("#updateModal [name=city]").addEventListener('change', function () {
    const pname = document.querySelector("#updateModal [name=province]").value
    const cname = this.value
    if (pname === '' || cname === '') return
    axios.get('/geo/county', { params: { pname, cname } }).then(res => {
        // console.log(res)
        let opts = '<option value="">--县--</option>'
        res.data.forEach(item => {
            opts += `<option value="${item}">${item}</option>`
        })
        document.querySelector("#updateModal [name=county]").innerHTML = opts
    })
})


//增加功能
//监听form表单提交事件
document.querySelector('#addModal form').addEventListener('submit', function (e) {
    e.preventDefault()
    //收集数据
    const name = document.querySelector('#addModal [name=name]').value
    const age = document.querySelector('#addModal [name=age]').value
    const group = document.querySelector('#addModal [name=group]').value
    const sex = document.querySelector('#addModal [name=sex]').value
    const phone = document.querySelector('#addModal [name=phone]').value
    const salary = document.querySelector('#addModal [name=salary]').value
    const truesalary = document.querySelector('#addModal [name=truesalary]').value
    const province = document.querySelector('#addModal [name=province]').value
    const city = document.querySelector('#addModal [name=city]').value
    const county = document.querySelector('#addModal [name=county]').value
    const data = `name=${name}&age=${age}&group=${group}&sex=${sex}&phone=${phone}&salary=${salary}&truesalary=${truesalary}&province=${province}&city=${city}&county=${county}`
    axios.post('/student/add', data).then(res => {
        const { code, message } = res.data
        if (code === 0) {
            //关闭弹出框
            $('#addModal').modal('hide')
            //重新渲染数据
            render()
        }
    })
})

document.querySelector('#updateModal form').addEventListener('submit', function (e) {
    e.preventDefault()
    //收集数据
    const name = document.querySelector('#updateModal [name=name]').value
    const age = document.querySelector('#updateModal [name=age]').value
    const group = document.querySelector('#updateModal [name=group]').value
    const sex = document.querySelector('#updateModal [name=sex]').value
    const phone = document.querySelector('#updateModal [name=phone]').value
    const salary = document.querySelector('#updateModal [name=salary]').value
    const truesalary = document.querySelector('#updateModal [name=truesalary]').value
    const province = document.querySelector('#updateModal [name=province]').value
    const city = document.querySelector('#updateModal [name=city]').value
    const county = document.querySelector('#updateModal [name=county]').value
    const data = `id=${id}&name=${name}&age=${age}&group=${group}&sex=${sex}&phone=${phone}&salary=${salary}&truesalary=${truesalary}&province=${province}&city=${city}&county=${county}`
    axios.put('/student/update', data).then(res => {
        const { code, message } = res.data
        if (code === 0) {
            //关闭弹出框  
            $('#updateModal').modal('hide')
            //重新渲染数据
            render() 
        }
    })
})